﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
	CodeBehind="Position.aspx.cs" Inherits="ControlExplorer.C1ComboBox.Position" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1ComboBox"
	TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
	<script id="scriptInit" type="text/javascript">
		function changed() {
			$("#<%=C1ComboBox1.ClientID%>").c1combobox('option', 'dropDownListPosition', {
				my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
				at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(),
				offset: $('#offset').val(),
				collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val()
			});
		}
	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<wijmo:C1ComboBox ID="C1ComboBox1" runat="server" Width="160px" >
	<DropDownListPosition >
		<At Left="Center" Top="Bottom" />
		<My Left="Right" Top="Top" />
	</DropDownListPosition>
		<Items>
			<wijmo:C1ComboBoxItem Text="c++" Value="c++" />
			<wijmo:C1ComboBoxItem Text="java" Value="java" />
			<wijmo:C1ComboBoxItem Text="php" Value="php" />
			<wijmo:C1ComboBoxItem Text="coldfusion" Value="coldfusion" />
			<wijmo:C1ComboBoxItem Text="javascript" Value="javascript" />
			<wijmo:C1ComboBoxItem Text="asp" Value="asp" />
			<wijmo:C1ComboBoxItem Text="ruby" Value="ruby" />
			<wijmo:C1ComboBoxItem Text="python" Value="python" />
			<wijmo:C1ComboBoxItem Text="c" Value="c" />
			<wijmo:C1ComboBoxItem Text="scala" Value="scala" />
			<wijmo:C1ComboBoxItem Text="groovy" Value="groovy" />
			<wijmo:C1ComboBoxItem Text="haskell" Value="haskell" />
			<wijmo:C1ComboBoxItem Text="perl" Value="perl" />
		</Items>
	</wijmo:C1ComboBox>
	<script type="text/javascript">
		$(document).ready(function () {
			$('.position').bind('change', changed);
		});
	</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
	<p>
	<strong>C1ComboBox</strong> 支持改变下拉菜单的位置。
	</p>
		<ul>
	<li><strong>DropDownListPosition </strong>-改变下拉菜单的位置。</li>
	</ul>

	<p>
	使用选项来控制下拉菜单列表的位置；它支持水平、垂直、偏移量和碰撞冲突的设置。
	</p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
	<div class="demo-options">
		<!-- Begin options markup -->
		<div class="option-row">
			<label for="my_horizontal">
				下拉菜单列表:</label>
			<select id="my_horizontal" class="position">
				<option value="left">靠左</option>
				<option value="center">居中</option>
				<option value="right">靠右</option>
			</select>
			<select id="my_vertical" class="position">
				<option value="top">顶部</option>
				<option value="middle">居中</option>
				<option value="bottom">底部</option>
			</select>
		</div>
		<div class="option-row">
			<label for="at_horizontal">
				要对齐的文本框:</label>
			<select id="at_horizontal" class="position">
				<option value="left">左对齐</option>
				<option value="center">中心对齐</option>
				<option value="right">右对齐</option>
			</select>
			<select id="at_vertical" class="position">
				<option value="top">顶部对齐</option>
				<option value="middle">中心对齐</option>
				<option value="bottom">底部对齐</option>
			</select>
		</div>
		<div class="option-row">
			<label for="offset">
				偏移量:</label>
			<input onblur="changed()" id="offset" type="text" size="15" />
		</div>
		<div class="option-row">
			<label for="collision_horizontal">
				水平冲突检测:</label>
			<select id="collision_horizontal">
				<option value="flip">翻动</option>
				<option value="fit">相符</option>
				<option value="none">无</option>
			</select>
			<label for="collision_vertical">
				垂直冲突检测:</label>
			<select id="collision_vertical">
				<option value="flip">翻动</option>
				<option value="fit">相符</option>
				<option value="none">无</option>
			</select>
		</div>
		<!-- End options markup -->
	</div>
</asp:Content>
